<template>
	<view class="container">
		<!-- 头部区域 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<text class="back-icon">‹</text>
			</view>
			<text class="page-title">我的任务</text>
		</view>

		<!-- 进度概览卡片 -->
		<view class="progress-cards">
			<view class="progress-card daily">
				<view class="card-icon">📅</view>
				<view class="card-content">
					<text class="card-title">今日进度</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: dailyProgressPercent + '%' }"></view>
					</view>
					<text class="progress-text">{{ dailyCompleted }}/{{ dailyTotal }} 完成</text>
				</view>
			</view>
			
			<view class="progress-card weekly">
				<view class="card-icon">✅</view>
				<view class="card-content">
					<text class="card-title">本周进度</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: weeklyProgressPercent + '%' }"></view>
					</view>
					<text class="progress-text">{{ weeklyCompleted }}/{{ weeklyTotal }} 完成</text>
				</view>
			</view>
		</view>

		<!-- 任务分类筛选 -->
		<view class="task-filters">
			<view 
				class="filter-btn" 
				:class="{ active: currentFilter === filter.value }"
				v-for="filter in taskFilters" 
				:key="filter.value"
				@click="selectFilter(filter.value)"
			>
				<text class="filter-text">{{ filter.label }}</text>
			</view>
		</view>

		<!-- 任务列表 -->
		<view class="task-list">
			<view 
				class="task-item" 
				v-for="task in filteredTasks" 
				:key="task.id"
				:class="{ completed: task.status === 'completed' }"
			>
				<view class="task-icon">{{ task.icon }}</view>
				<view class="task-content">
					<view class="task-header">
						<text class="task-name">{{ task.name }}</text>
						<view class="task-type" :class="task.type">{{ task.typeText }}</view>
					</view>
					<text class="task-description">{{ task.description }}</text>
					
					<!-- 进度显示（仅周任务和成就任务） -->
					<view v-if="task.type !== 'daily' && task.progress" class="task-progress">
						<text class="progress-text">进度: {{ task.progress.current }}/{{ task.progress.total }}</text>
						<text class="progress-percent">{{ task.progress.percent }}%</text>
					</view>
					
					<view class="task-footer">
						<text class="task-deadline">{{ task.deadline }}</text>
						<text class="task-reward">+{{ task.reward }}积分</text>
					</view>
				</view>
				
				<view class="task-action">
					<view v-if="task.status === 'completed'" class="completed-tag">
						<text class="completed-text">已完成</text>
					</view>
					<view v-else class="action-btn" @click="completeTask(task)">
						<text class="action-text">去完成</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 空状态提示 -->
		<view v-if="filteredTasks.length === 0" class="empty-state">
			<text class="empty-icon">📋</text>
			<text class="empty-text">暂无{{ getFilterText() }}任务</text>
			<text class="empty-desc">快去完成环保任务，获得积分奖励吧</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentFilter: 'all',
			totalPoints: 80,
			dailyCompleted: 1,
			dailyTotal: 3,
			weeklyCompleted: 0,
			weeklyTotal: 2,
			taskFilters: [
				{ label: '全部', value: 'all' },
				{ label: '每日任务', value: 'daily' },
				{ label: '每周任务', value: 'weekly' },
				{ label: '成就任务', value: 'achievement' }
			],
			tasks: [
				{
					id: 1,
					name: '垃圾分类小能手',
					icon: '📦',
					type: 'daily',
					typeText: '每日任务',
					description: '正确分类并回收1件物品',
					deadline: '今天 23:59',
					reward: 10,
					status: 'completed',
					progress: null
				},
				{
					id: 2,
					name: '节能小达人',
					icon: '💡',
					type: 'daily',
					typeText: '每日任务',
					description: '关闭不必要的电子设备30分钟',
					deadline: '今天 23:59',
					reward: 8,
					status: 'pending',
					progress: null
				},
				{
					id: 3,
					name: '绿色出行者',
					icon: '🚲',
					type: 'daily',
					typeText: '每日任务',
					description: '使用公共交通或步行/骑行出行',
					deadline: '今天 23:59',
					reward: 12,
					status: 'pending',
					progress: null
				},
				{
					id: 4,
					name: '环保学习达人',
					icon: '📚',
					type: 'weekly',
					typeText: '每周任务',
					description: '完成3节环保课程学习',
					deadline: '本周日 23:59',
					reward: 25,
					status: 'pending',
					progress: {
						current: 1,
						total: 3,
						percent: 33
					}
				},
				{
					id: 5,
					name: '社区环保志愿者',
					icon: '🤝',
					type: 'weekly',
					typeText: '每周任务',
					description: '参与1次社区环保活动',
					deadline: '本周日 23:59',
					reward: 30,
					status: 'pending',
					progress: {
						current: 0,
						total: 1,
						percent: 0
					}
				},
				{
					id: 6,
					name: '环保达人',
					icon: '🏆',
					type: 'achievement',
					typeText: '成就任务',
					description: '连续完成30天环保任务',
					deadline: '长期有效',
					reward: 100,
					status: 'pending',
					progress: {
						current: 15,
						total: 30,
						percent: 50
					}
				}
			]
		}
	},
	computed: {
		dailyProgressPercent() {
			return (this.dailyCompleted / this.dailyTotal) * 100;
		},
		weeklyProgressPercent() {
			return (this.weeklyCompleted / this.weeklyTotal) * 100;
		},
		filteredTasks() {
			if (this.currentFilter === 'all') {
				return this.tasks;
			}
			return this.tasks.filter(task => task.type === this.currentFilter);
		}
	},
	methods: {
		goBack() {
			uni.navigateBack();
		},
		selectFilter(filterValue) {
			this.currentFilter = filterValue;
		},
		completeTask(task) {
			if (task.status === 'completed') return;
			
			// 模拟任务完成
			uni.showModal({
				title: '完成任务',
				content: `确定要完成"${task.name}"任务吗？完成后将获得${task.reward}积分！`,
				success: (res) => {
					if (res.confirm) {
						this.handleTaskCompletion(task);
					}
				}
			});
		},
		handleTaskCompletion(task) {
			// 更新任务状态
			task.status = 'completed';
			
			// 更新积分
			this.totalPoints += task.reward;
			
			// 更新进度统计
			if (task.type === 'daily') {
				this.dailyCompleted = Math.min(this.dailyCompleted + 1, this.dailyTotal);
			} else if (task.type === 'weekly') {
				this.weeklyCompleted = Math.min(this.weeklyCompleted + 1, this.weeklyTotal);
			}
			
			// 显示完成提示
			uni.showToast({
				title: `任务完成！+${task.reward}积分`,
				icon: 'success',
				duration: 2000
			});
			
			// 更新任务进度
			if (task.progress) {
				task.progress.current = Math.min(task.progress.current + 1, task.progress.total);
				task.progress.percent = Math.round((task.progress.current / task.progress.total) * 100);
			}
		},
		getFilterText() {
			const filter = this.taskFilters.find(f => f.value === this.currentFilter);
			return filter ? filter.label : '相关';
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(135deg, #f0f8ff, #e6f3ff);
	padding-bottom: 120rpx;
}

/* 头部样式 */
.header {
	display: flex;
	align-items: center;
	padding: 80rpx 30rpx 30rpx;
	background: white;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	position: relative;
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f5f5f5;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: all 0.3s ease;
		margin-right: 30rpx;
		
		&:active {
			transform: scale(0.95);
			background: #e0e0e0;
		}
		
		.back-icon {
			font-size: 36rpx;
			color: #666;
			font-weight: bold;
		}
	}
	
	.page-title {
		font-size: 40rpx;
		font-weight: bold;
		color: #333;
		flex: 1;
		text-align: left;
	}
}

/* 进度卡片样式 */
.progress-cards {
	display: flex;
	gap: 20rpx;
	padding: 30rpx;
	
	.progress-card {
		flex: 1;
		background: white;
		border-radius: 20rpx;
		padding: 25rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: center;
		gap: 20rpx;
		transition: all 0.3s ease;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}
		
		.card-icon {
			font-size: 40rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
		}
		
		&.daily .card-icon {
			background: rgba(33, 150, 243, 0.1);
			color: #2196F3;
		}
		
		&.weekly .card-icon {
			background: rgba(76, 175, 80, 0.1);
			color: #4CAF50;
		}
		
		.card-content {
			flex: 1;
			
			.card-title {
				font-size: 26rpx;
				color: #666;
				display: block;
				margin-bottom: 15rpx;
			}
			
			.progress-bar {
				width: 100%;
				height: 8rpx;
				background: #f0f0f0;
				border-radius: 4rpx;
				overflow: hidden;
				margin-bottom: 10rpx;
				
				.progress-fill {
					height: 100%;
					background: linear-gradient(90deg, #4CAF50, #66BB6A);
					border-radius: 4rpx;
					transition: width 0.5s ease;
				}
			}
			
			.progress-text {
				font-size: 22rpx;
				color: #999;
				display: block;
			}
		}
	}
}

/* 任务筛选样式 */
.task-filters {
	display: flex;
	gap: 15rpx;
	padding: 0 30rpx 30rpx;
	
	.filter-btn {
		flex: 1;
		padding: 20rpx 0;
		background: white;
		border-radius: 25rpx;
		text-align: center;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
		
		&.active {
			background: #4CAF50;
			border-color: #4CAF50;
			transform: scale(1.05);
			
			.filter-text {
				color: white;
				font-weight: bold;
			}
		}
		
		&:active {
			transform: scale(0.98);
		}
		
		.filter-text {
			font-size: 26rpx;
			color: #666;
			transition: all 0.3s ease;
		}
	}
}

/* 任务列表样式 */
.task-list {
	padding: 0 30rpx;
	
	.task-item {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
		display: flex;
		align-items: flex-start;
		gap: 25rpx;
		transition: all 0.3s ease;
		animation: slideInUp 0.6s ease-out;
		
		&:hover {
			transform: translateY(-4rpx);
			box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
		}
		
		&.completed {
			opacity: 0.8;
			background: #f8f9fa;
			
			.task-icon {
				background: rgba(76, 175, 80, 0.1);
				color: #4CAF50;
			}
		}
		
		.task-icon {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: rgba(33, 150, 243, 0.1);
			color: #2196F3;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 32rpx;
			flex-shrink: 0;
			transition: all 0.3s ease;
		}
		
		.task-content {
			flex: 1;
			
			.task-header {
				display: flex;
				align-items: center;
				gap: 15rpx;
				margin-bottom: 15rpx;
				
				.task-name {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
				}
				
				.task-type {
					padding: 6rpx 12rpx;
					border-radius: 15rpx;
					font-size: 20rpx;
					font-weight: 600;
					
					&.daily {
						background: rgba(33, 150, 243, 0.1);
						color: #2196F3;
					}
					
					&.weekly {
						background: rgba(76, 175, 80, 0.1);
						color: #4CAF50;
					}
					
					&.achievement {
						background: rgba(255, 193, 7, 0.1);
						color: #FFC107;
					}
				}
			}
			
			.task-description {
				font-size: 26rpx;
				color: #666;
				line-height: 1.5;
				margin-bottom: 15rpx;
				display: block;
			}
			
			.task-progress {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 15rpx;
				
				.progress-text {
					font-size: 24rpx;
					color: #999;
				}
				
				.progress-percent {
					font-size: 24rpx;
					color: #4CAF50;
					font-weight: bold;
				}
			}
			
			.task-footer {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.task-deadline {
					font-size: 24rpx;
					color: #999;
				}
				
				.task-reward {
					font-size: 24rpx;
					color: #FF6B6B;
					font-weight: bold;
				}
			}
		}
		
		.task-action {
			flex-shrink: 0;
			
			.completed-tag {
				padding: 12rpx 20rpx;
				background: #4CAF50;
				border-radius: 20rpx;
				
				.completed-text {
					color: white;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
			
			.action-btn {
				padding: 12rpx 24rpx;
				background: #4CAF50;
				border-radius: 20rpx;
				transition: all 0.3s ease;
				box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
				
				&:active {
					transform: scale(0.95);
					box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.4);
				}
				
				.action-text {
					color: white;
					font-size: 24rpx;
					font-weight: 600;
				}
			}
		}
	}
}

/* 空状态样式 */
.empty-state {
	text-align: center;
	padding: 120rpx 40rpx;
	animation: fadeInUp 0.8s ease-out;
	
	.empty-icon {
		font-size: 120rpx;
		display: block;
		margin-bottom: 30rpx;
		opacity: 0.5;
		animation: bounce 2s ease-in-out infinite;
	}
	
	.empty-text {
		font-size: 32rpx;
		color: #666;
		display: block;
		margin-bottom: 15rpx;
		font-weight: 500;
	}
	
	.empty-desc {
		font-size: 26rpx;
		color: #999;
		display: block;
	}
}

/* 动画关键帧 */
@keyframes slideInUp {
	from {
		opacity: 0;
		transform: translateY(30rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		transform: translateY(40rpx);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(-10rpx);
	}
	60% {
		transform: translateY(-5rpx);
	}
}

/* 响应式设计 */
@media (max-width: 750rpx) {
	.header {
		padding: 60rpx 20rpx 25rpx;
		
		.back-btn {
			margin-right: 20rpx;
		}
		
		.page-title {
			font-size: 32rpx;
		}
		

	}
	
	.progress-cards {
		padding: 20rpx;
		flex-direction: column;
		
		.progress-card {
			padding: 20rpx;
		}
	}
	
	.task-filters {
		padding: 0 20rpx 20rpx;
		flex-wrap: wrap;
		
		.filter-btn {
			min-width: calc(50% - 7.5rpx);
		}
	}
	
	.task-list {
		padding: 0 20rpx;
		
		.task-item {
			padding: 25rpx;
			
			.task-content .task-name {
				font-size: 28rpx;
			}
		}
	}
}
</style>
